/*
 * @Author: weidewei
 * @Date: 2025-11-19 15:39:51
 * @LastEditors: weidewei
 * @LastEditTime: 2025-11-21 15:03:42
 * @Description:
 * @FilePath: \2025-front-face\vite-react-ts-template\src\pages\useEffect.tsx
 */
import styled from 'styled-components';
import axios from '@/utils/axios';
export default function useEffectComp() {
  // const [position, setPosition] = useState({ x: 0, y: 0 });
  // useEffect(() => {
  //   function handleMove(e: MouseEvent) {
  //     setPosition({ x: e.clientX, y: e.clientY });
  //   }
  //   // 统一处理鼠标、触摸、触控笔等多种输入设备的移动事件
  //   window.addEventListener('pointermove', handleMove);
  //   return () => {
  //     window.removeEventListener('pointermove', handleMove);
  //   };
  // }, []);
  // const [seconds, setSeconds] = useState(0);
  const [data, setData] = useState('');
  const [result, setResult] = useState('');
  const inpRef = useRef(null);
  useEffect(() => {
    // const interVal = setInterval(() => {
    //   setSeconds((prev) => prev + 1);
    // }, 1000);
    // initData();
    // return () => {
    //   console.log('卸载了');
    //   clearInterval(interVal);
    // };
    if (data) {
      initData(data);
    }
  }, [data]); // []表示只在挂载/卸载的时候执行
  function handleGetData(data:string) {
    console.log(data);
    setData(data);
  }
  function initData(data:string) {
    axios.get('/za/xingzuo.php?msg=' + data).then((res) => {
      // console.log('res', res.data);
      setResult(res.data);
    });
  }
  return (
    <Wrapper>
      <div className="use-effect">
        {/* <div
          style={{
            position: 'absolute', // absolute元素向上查找第一个非static祖先，如果找到 → 相对于该祖先定位，如果没找到 → 相对于初始包含块（通常是视口）
            backgroundColor: 'pink',
            borderRadius: '50%',
            opacity: 0.6,
            transform: `translate(${position.x}px, ${position.y}px)`,
            pointerEvents: 'none',
            left: -20,
            top: -20,
            width: 40,
            height: 40,
          }}
        /> */}
        {/* 运行时间: {seconds}秒 data:{data} */}
        星座： <input ref={inpRef} onKeyDown={(e)=>{
          if(e.key === 'Enter') {
            initData(inpRef.current.value);
          }
        }} type="text"  onBlur={(e) => handleGetData(e.target.value)} />
        <br />
        <p>星座运势：{result}</p>
      </div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  .use-effect {
    color: #000;
  }
`;
